<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* .a {
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
      .b {
        font-size: 50px;
      }
      .c {
        background-color: purple;
      }
      .f{
        border-radius: 20px;
      } */

      .active {
        background-color: aqua;
        font-size: 20px;
        font-style: italic;
        color:blueviolet
      }
    </style>
  </head>
  <body>
    <div class="a b" id="box">hhh</div>
    <ul>
      <li>休闲</li>
      <li>休闲</li>
      <li>休闲</li>
      <li>休闲</li>
    </ul>

    <script>
      //   var box = document.getElementById('box');
      //   box.onclick = function () {
      //     // box.classList.add('c');
      //     // box.classList.remove('b');
      //     box.classList.replace('b', 'c');
      //     //某个classlist 是否存在，返回布尔值
      //     var res = box.classList.contains('a');
      //     console.log(res);
      //     //有无切换
      //     box.classList.toggle('f')
      //   };

      // 案例  当鼠标移动进去换色
      var lisEle = document.getElementsByTagName('li');
      for (var i = 0; i < lisEle.length; i++) {
        lisEle[i].onmouseover = function () {
          this.classList.add('active');
        };
        lisEle[i].onmouseout = function(){
            this.classList.remove('active')
        }
      }

    </script>
  </body>
</html>
